<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>易店长推广签到</title>
    <style>
        #overlay {
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5; /* 透明度 */
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 100; /* 此处的图层要大于页面 */
            display: none;
        }

        #loadingGif {
            margin: 0 auto;
            position: relative;
            top: 40%;
        }
    </style>
</head>
<body>
<div id="container" tabindex="0"></div>
<div>
    <div id="overlay">
        <img id="loadingGif"
             src="http://yunlandyunshop.oss-cn-beijing.aliyuncs.com/media/course/2017/08/5-121204193R0-50.gif"
             style="display: block">
    </div>

    <div class="container">

        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="shopName" class="col-sm-2 control-label">店铺名称：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="shopName"
                           placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label for="petName" class="col-sm-2 control-label">签到人昵称：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="petName"
                           placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label for="linkman" class="col-sm-2 control-label">联系人：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="linkman"
                           placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label for="contactWay" class="col-sm-2 control-label">联系方式：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="contactWay"
                           placeholder="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="changeSystem"> 是否有意使用易店长
                        </label>
                        <label>
                            <input type="checkbox" id="followWeChat"> 是否关注微信公众号
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="contactWay" class="col-sm-2 control-label">上传图像：</label>
                <div class="col-sm-10">
                    <input type="file" id="picture" accept="image/*" capture="camera">
                </div>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-primary btn-lg btn-block" id="save">保存</button>
            </div>
        </form>
    </div>
</div>
</body>


<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=17500cbf09ecbffff5591095fb481f81"></script>
<script type="text/javascript">

    $(document).ready(function () {
        var nickname = window.localStorage.getItem("nickname")
        if (nickname == undefined) {
            window.localStorage.setItem("href", window.location.href)
            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1a97c7597e7e3519&redirect_uri=http://www.gemstory.cn/get_code/&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect"

        } else {
            document.getElementById("petName").value = nickname
        }
    })

    $("#save").click(function () {

        $("#overlay").attr("style", "display: block")
        getGeolocation()

    })

    var picture = "";
    $("#picture").change(function (event) {
        $("#overlay").attr("style", "display: block")
        var files = event.target.files, file;
        if (files && files.length > 0) {
            // 获取目前上传的文件
            file = files[0];// 文件大小校验的动作
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
            });
            var formData = new FormData();
            formData.append("files", file);
            $.ajax({
                type: "POST",
                url: "/goods/save_comment_image/",
                data: formData,
                processData: false,
                contentType: false,
                success: function (result) {
                    $("#overlay").attr("style", "display: none")
                    picture = JSON.parse(result).file_path;
                },
                error: function (result) {
                    console.log(result)
                }
            });
        } else {
            $("#overlay").attr("style", "display: none")
        }
    })

    function saveForm(data) {
        if (picture == "") {
            $("#overlay").attr("style", "display: none")
            alert("请上传图片")
            return
        }
        var lng = data.position.lng
        var lat = data.position.lat
        var shopName = $("#shopName").val();
        var petName = $("#petName").val();
        var linkman = $("#linkman").val();
        var contactWay = $("#contactWay").val();
        var changeSystem = $("#changeSystem").is(':checked');
        var followWeChat = $("#followWeChat").is(':checked');
        $.ajax({
            type: "POST",
            url: "/singin_save/",

            data: {
                'lat':
                lat,
                'lng':
                lng,
                'shopName':
                shopName,
                'petName':
                petName,
                'linkman':
                linkman,
                'contactWay':
                contactWay,
                'changeSystem':
                changeSystem,
                'followWeChat':
                followWeChat,
                'picture':
                picture
            }
            ,//参数列表
            dataType: "json",
            success:
                function (result) {
                    $("#overlay").attr("style", "display: none")
                    alert("保存成功")
                    //请求正确之后的操作
                }
            ,
            error: function (result) {
                //请求失败之后的操作
            }
        })
        ;

    }


    function getGeolocation() {

        var self = this;
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                buttonPosition: 'RB'
            });

            geolocation.getCurrentPosition();//获取当前位置信息
            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });

        //解析定位结果
        function onComplete(data) {
            saveForm(data);


        }

        //解析定位错误信息
        function onError(data) {
            $("#overlay").attr("style", "display: none")
            alert("定位失败")
            console.log("定位失败")
        }
    }


</script>
</html>
